<template>
  <div class="main_container">
    <el-row :gutter="5">
      <el-col :span="12">
        <div>
          <el-form>
            <el-form-item label="单据日期">
              <el-date-picker
                  v-model="voucherForm.value"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form style="margin-left:3rem;">
            <el-form-item>
              <el-button type="primary" @click="voucherQuery" icon="el-icon-search">
                查询凭证号
              </el-button>
              <el-button @click="resetForm('queryForm')" icon="el-icon-refresh">重置</el-button>
              <el-button type="warning" icon="el-icon-document-checked" @click="excelImport">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top: 3rem;">
      <el-table
          v-loading="loading"
          :header-cell-style="{'text-align':'center',background:'#eef1f6'}"
          :cell-style="{'text-align':'center'}"
          :data="voucherData"
          height="650"
          border
          style="width: 100%">
        <el-table-column
            prop="fbillNo"
            label="单据号"
        >
        </el-table-column>
        <el-table-column
            prop="fdate"
            label="单据日期"
        >
        </el-table-column>
        <el-table-column
            prop="voucher"
            label="凭证号">
        </el-table-column>
      </el-table>
    </el-row>
    <pagination
        :v_show="total > 0"
        :total="total"
        :page.sync="voucherForm.pageNum"
        :limit.sync="voucherForm.pageSize"
        @pagination="loadTable"
    />
  </div>
</template>

<script>
import {queryVoucherDataList, exportVoucherDetails} from '@/api/T100/voucherquery'

export default {
  name: "voucherquery",
  data() {
    return {
      voucherForm: {
        pageNum: 1,
        pageSize: 10,
        value: []
      },
      total: 0,
      voucherData: [],
      loading: false
    }
  },
  methods: {
    loadTable() {
      this.voucherQuery()
    },
    voucherQuery() {
      if (this.voucherForm.value.length === 0) {
        this.$message.error('单据日期不能为空！')
        return
      }
      // this.$message.warning('当前页查询较慢,请耐心等待~')
      this.loading = true
      queryVoucherDataList(this.voucherForm).then(res => {
        if (res.code == '200') {
          this.voucherData = res.rows
          this.total = res.total
          this.loading = false
        }
      })
    },
    resetForm() {
      this.voucherForm = {
        pageNum: 1,
        pageSize: 10,
        value: []
      }
    },
    excelImport() {
      this.$confirm('是否确认导出单据凭证号明细?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        exportVoucherDetails(this.voucherForm).then(resp => {
          const reader = new FileReader()
          reader.readAsDataURL(resp)
          reader.onload = (e) => {
            const a = document.createElement('a')
            a.download = `单据凭证号.xls`
            a.href = e.target.result
            document.body.appendChild(a)
            a.click()
            this.$message.success('导出成功')
            document.body.removeChild(a)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main_container {
  margin: 5px;
}
</style>
